import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Badge, Card, Image, Tabs } from "antd-mobile";
import styles from "./Home.module.css";
import { HeartFill } from "antd-mobile-icons";
import http from "../../axios/request.js";

const Index = () => {
  const navigate = useNavigate();
  const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
  const avatar = localStorage.getItem("avator");
  const [HomeList, setHomeList] = useState([]);

  //点赞收藏
  const [collectList, setCollectList] = useState(
    JSON.parse(localStorage.getItem("collectList") || "[]")
  );

  //收藏点赞
  const handelColl = (item) => {
    //判断当前项item是否在收藏列表：在：取消 不在：收藏
    const itemFlag = collectList.some((it) => it.id === item.id);

    if (itemFlag) {
      //取消收藏
      const newCollList = collectList.filter((it) => it.id !== item.id);
      setCollectList(newCollList);
      localStorage.setItem("collectList", JSON.stringify(newCollList));
    } else {
      setCollectList([...collectList, item]);
      localStorage.setItem(
        "collectList",
        JSON.stringify([...collectList, item])
      );
    }
  };

  //请求数据
  const getList = async () => {
    const res = await http.get("/api/list");
    const { data } = res.data;
    setHomeList(data);
  };

  useEffect(() => {
    getList();
  }, []);

  return (
    <div>
      <div className={styles.Header}>
        <div className={styles.head_title}>
          <div className={styles.head_t_right}>
            <Badge content={Badge.dot}>
              <span onClick={() => navigate("/message")}>通知</span>
            </Badge>
            <img className={styles.avatarimg} src={avatar}></img>
          </div>
        </div>
      </div>
      <Tabs>
        <Tabs.Tab title="最新活动块" key="fruits">
          <Card
            title="最新活动"
            style={{
              borderRadius: "10px",
              background: "#f2f2f2",
              overflow: "hidden",
            }}
          >
            <div className={styles.innerScroll}>
              {HomeList.length > 0 &&
                HomeList.map((item, ind) => (
                  <Card
                    key={ind}
                    className={styles.card_item}
                    style={{
                      borderRadius: "10px",
                      width: 240,
                      background: "#fff",
                    }}
                    onClick={() => navigate(`/detail/${item.id}`)}
                  >
                    <div className={styles.content}>
                      <div className={styles.card_top}>
                        <Image src={item.image}></Image>
                        <div className={styles.top_head}>
                          <HeartFill
                            color={
                              collectList.some((it) => it.id === item.id)
                                ? "orangered"
                                : "#666"
                            }
                            onClick={() => handelColl(item)}
                            fontSize={26}
                          />
                        </div>
                      </div>
                      <div className={styles.card_bottom}>
                        <div className={styles.bot_topinner}>
                          <h3>{item.title}</h3>
                          <dl>
                            <dt>
                              <img src={avatar}></img>
                            </dt>
                            <dd>{userInfo.nickname}</dd>
                          </dl>
                        </div>
                        <span className={styles.priceEl}>¥{item.price}</span>
                      </div>
                    </div>
                  </Card>
                ))}
            </div>
          </Card>
        </Tabs.Tab>
        <Tabs.Tab title="类别块" key="vegetables">
          西红柿
        </Tabs.Tab>
        <Tabs.Tab title="进行中块" key="animals">
          蚂蚁
        </Tabs.Tab>
      </Tabs>
    </div>
  );
};

export default Index;
